﻿
@{
    ViewData["Title"] = "EchartsInfo";
}

<h1>EchartsInfo</h1>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <!-- 引入 echarts.js -->
    <script src="~/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
         var chart = echarts.init(main, 'dark');
          // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
         myChart.showLoading();
        var seriesData = [];
        var legendData = [];
            $.post("/Account/EchartsInfo", function (data) {
                var list = eval("(" + data + ")");
                for (var i = 0; i < list.length; i++) {
                    seriesData.push({
                        name: list[i]['name'],
                        value: list[i]['count']
                    })
                    legendData.push((list[i]['name']))
                }
                 // 指定图表的配置项和数据
          var option = {
            title: {
                text: '博客分布',
                subtext: '本网站作者发布博客统计环形图',
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
              legend: {

                type: 'scroll',
                orient: 'vertical',
                bottom: '20px',
                left: 'right',
                data:legendData
              },

            series: [
                {
                    name: '博客量统计',
                    //hover状态下的扇区放大动画效果，默认为true
                    hoverAnimation: true,
                    type: 'pie',
                    radius: '70%',
                    center: ['50%', '60%'],
                    data: seriesData,
                     emphasis: {
                    itemStyle: {
                    shadowBlur: 100,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
                    },

                }

            ]
        };
                  myChart.setOption(option)
                  myChart.hideLoading();
            });

             @*  CallAjax("@Url.Action("EchartsInfo")", function (ret) {
                       alert(ret);
                });
                alert("11111111");*@
        // 指定图表的配置项和数据



    </script>
</body>
</html>